<template>
  <div>
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row
      style="
        width: 86.3%;
        top: 6px;
        z-index: 999;
        position: fixed;
        display: none;
      "
    >
      <el-col :span="4.5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->
        <!-- <el-cascader
          class="region"
          v-model="salesGrade"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 200px; height: 30px"
        >
        </el-cascader> -->
      </el-col>
      <el-col :span="12" style="background-color: #f5f5f5; height: 30px">
        <nav id="navbar">
          <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">MTD</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">QTD</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">YTD</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">整体销售趋势</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">品牌销售额</a>
            </li>

            <li :class="{ active: isActiveSection(6) }">
              <a href="#section6" @click="scrollToSection(6)">渠道库存</a>
            </li>
            <li :class="{ active: isActiveSection(7) }">
              <a href="#section7" @click="scrollToSection(7)">店铺库存</a>
            </li>
            <li :class="{ active: isActiveSection(8) }">
              <a href="#section8" @click="scrollToSection(8)">地区排行</a>
            </li>
          </ul>
        </nav>
      </el-col>
      <el-col :span="7">
        <!-- <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date> -->
      </el-col>
    </el-row>
    <!-- 
    <section id="section4">
      <el-row :gutter="10" style="padding: 32px 0">
        <el-col :span="24">
          <el-card>
            <div
              slot="header"
              class="card-box"
              style="display: flex; justify-content: space-between"
            >
              <span
                ><i class="el-icon-collection"></i>
                整体销售趋势（销售额/达成率）</span
              >
              <timeSearch
                @getDateArr="getDateArr"
                @changDay="changDay"
                :timeArr="timeArr"
                :dayActive="this.dayActive"
                :dayLimit="1095"
              />
            </div>

            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MinChart
                :id="'echartDataMin'"
                :minchartData="echartDataMin"
                height="410px"
                width="100%"
                @SetLineChartData="SetLineChartData"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->

    <!-- <section>
      <el-row
        style="background: #fff; padding: 40px 16px 10px; margin-top: 30px"
      >
        <el-col :span="20">
          <span
            ><i class="el-icon-collection"></i> {{ query.salesGrade + " "
            }}{{ query.dateType | state1 }}{{ " " }} 渠道销售情况
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <ve-bar
              :settings="{
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c}%',
                },
              }"
              :data="barChartData"
              style="height: 350px"
              :extend="{
                series: { barWidth: 15 },
              }"
            ></ve-bar>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <ve-histogram
              style="height: 350px"
              :data="echartDataSku"
              :extend="{ series: { barWidth: 15 } }"
              :settings="{
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c}万',
                },
              }"
            ></ve-histogram>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section6">
      <el-row :gutter="10" style="padding: 32px 0">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.salesGrade + " " }}各渠道销售目标完成明细</span
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出
            </el-button>
          </div>
        </el-card>
        <MergeTable :processData="ChannelSaleTrackingList" />
      </el-row>
    </section>

    <section id="section3">
      <el-row :gutter="10" style="padding: 32px 0">
        <el-col :span="24">
          <el-card>
            <div
              slot="header"
              class="card-box"
              style="display: flex; justify-content: space-between"
            >
              <span
                ><i class="el-icon-collection"></i> {{ query.salesGrade + " "
                }}{{ query.dateType | state1 }}{{ " " }}渠道销售达成趋势</span
              >
            </div>

            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <el-row
                style="
                  background: #fff;
                  padding: 16px 16px 0;
                  margin-bottom: 32px;
                "
              >
                <div
                  style="margin-left: 2px; margin-right: 2px; height: 460px"
                  ref="echarts"
                ></div>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->

    <section id="section4">
      <!-- margin-bottom: 32px  -->
      <el-row
        :gutter="10"
        style="
          background: #fff;
          padding: 40px 16px 10px;

          border-radius: 10px;
        "
      >
        <el-col :span="20">
          <span
            ><i class="el-icon-collection"></i> {{ query.salesGrade + " "
            }}{{ query.dateType | state1 }}{{ " " }}店铺销售达成趋势
          </span>
        </el-col>
        <el-col :span="4"
          ><el-select
            v-model="channelName"
            placeholder="选择渠道"
            clearable
            filterable
          >
            <el-option
              v-for="dict in channelNameData"
              :key="dict"
              :label="dict"
              :value="dict"
            /> </el-select
        ></el-col>
        <!-- <el-col :span="7"
          ><timeSearch
            @getDateArr="getDateArr"
            @changDay="changDay"
            :timeArr="timeArr"
            :dayActive="this.dayActive"
            :dayLimit="1095"
        /></el-col> -->
      </el-row>
      <el-card>
        <div
          class="el-table el-table--enable-row-hover el-table--medium chart-container"
        >
          <div
            style="margin-left: 2px; margin-right: 2px; height: 460px"
            ref="echartDataShop"
          ></div>
        </div>
      </el-card>
    </section>

    <section id="section7">
      <!-- margin-bottom: 32px  style="height: calc(100vh - 500px)"-->
      <el-row :gutter="10" style="padding: 16px 0">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{
                query.salesGrade + " "
              }}各店铺销售目标完成明细(金额单位:万)</span
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExportshop"
              >导出
            </el-button>
          </div>
          <ShopTable :wmsInventoryList="ShopSaleTrackingList" />
        </el-card>
      </el-row>
    </section>
  </div>
</template>

<script>
import {
  selectSaleTargetStatistics,
  //饼图
  brandSaleAmount,
  //环比
  channelSaleAmountYoy,
  //渠道
  channelSaleData,
  selectChannelSaleTracking,
  channelSaleCompletionStatistics,
  shopSaleCompletionStatistics,
  selectShopSaleTracking,
} from "@/api/sale/BiSaleAmount";
import { getCache } from "@/api/monitor/cache";
// import echarts from "echarts";
import * as echarts from "echarts/lib/echarts.js";
require("echarts/extension/bmap/bmap");
import "echarts/map/js/china.js"; //引入中国地图数据
import city from "echarts/map/json/china-cities.json";
import date from "./day/date.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";

import MinChart from "./Chart/MinChart.vue";
import MixChart from "./Chart/MixChart.vue";
import timeSearch from "./day/day.vue";
import exhaustionDay from "./day/exhaustionDay.vue";
// import waterLevelChart from "./waterLevelChart";
import progressMonthly from "./components/progressMonthly";
import progressYear from "./components/progressYear";
import MergeTable from "./components/MergeTable";
import ShopTable from "./components/ShopTable";
import card from "./Chart/card.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
import PanelGroupII from "./components/PanelGroupII";
// import LineChart from './components/LineChart'
import chartDataRaddar from "./components/chartDataRaddar";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";

import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";

export default {
  name: "Admin",
  dicts: [
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
  ],
  components: {
    MergeTable,
    ShopTable,
    chartDataRaddar,
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    PanelGroupII,
    card,
    progressMonthly,
    progressYear,
    // LineChart,

    // RaddarChart,
    PieChart,
    BarChart,

    chartData,
    chartDataI,
    MinChart,
    MixChart,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    exhaustionDay,
    date,
  },
  props: {
    query: {
      type: Object,
      default: () => {},
    },
    // salesGrade: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  data() {
    return {
      shopbarData: [],
      ShopSaleTrackingList: [],
      //表格
      ChannelSaleTrackingList: [],
      //渠道
      barChartData: {
        columns: [],
        rows: [],
      },
      channelTimeType: "year",
      //环比
      PieData: [],
      //趋势图
      skcitemData: [],
      //饼图
      PieChartData: {
        // order: {
        xData: [],
        female: [],
        // male: [],
        // average: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      echartData: {
        value: 0,
        name: "",
      },
      echartDataquarterly: {
        value: 0,
        name: "",
      },
      echartDatamonthly: {
        value: 0,
        name: "",
      },

      //品类属性
      itemType: [],
      //价格带
      list: [],
      //多选品类
      formData: {
        libraryIdList: [{ id: "" }],
      },
      libraryOptions: [], // 库存名称列表

      //雷达图
      echartDataRaddar: [],
      //总览数据
      itemData: {},
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        // property: "salesAmount",
        // firstLevelList: null,
        // secondLevelList: null,
        // threeLevelList: null,
      },
      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "一级",

      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],

      //BI指标数据
      biNumberItem: {},
      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",

      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮

      //传递数据
      // echartData: {
      //   columns: ["支付日期", "销售金额", "退款金额", "净销售额"],
      //   rows: [],
      // },
      highlightedSku: ["库存总金额", "产品库存总金额", "配件库存总金额"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["渠道", "销售额"],
        rows: [],
      },
      //时间
      dayActive: 15,
      shopActive: false,
      timeArr: [
        // { value: "2", label: "昨天" },
        { value: "15", label: "最近15天" },
        // { value: "30", label: "最近30天" },
        { value: "365", label: "月" },
        { value: "1", label: "日" },
      ],
      timeGap: { startTime: "", endTime: "" },
      dayActiveChannel: 15,
      ChannelActive: false,
      timeGapChannel: { startTime: "", endTime: "" },
      // 店铺
      cascadeList: [],
      // , "天猫", "vfu运动旗舰店"
      // salesGrade: [],
      value: "",

      loading: false,
      //店铺名称
      channelName: "天猫",
      channelNameData: [],
    };
  },
  created() {
    // this.getList();
    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
    // this.openLoading();
  },
  filters: {
    state1(string) {
      if (string == "month") {
        return "本月";
      }
      if (string == "quarterly") {
        return "本季";
      }
      if (string == "year") {
        return "本年";
      }
      // if (int == 2) { return "审批通过" };
    },
    /***
    一级二级增加售后状态
字段：applyStatus,状态值有3
1、待认领达人 -可以修改产品信息 status:to_match
2、待提交售后  --可修改达人信息，不能修改产品信息status:to_apply
3、已售后  --不可修改任意信息status:applyed 
    ** */
    state2(string) {
      if (string == "to_match") {
        return "待认领达人";
      }
      if (string == "to_apply") {
        return "待提交售后";
      }
      if (string == "applyed") {
        return "已售后";
      }
      if (string == "to_sumbit") {
        return "待提交";
      }
    },
  },
  mounted() {},
  computed: {
    chartSettings() {
      return {
        // 其他设置...
        label: {
          show: true,
          position: "top",
          formatter: (val) => {
            return (val * 100).toFixed(2) + "%"; // 转换为百分比并保留两位小数
          },
        },
        // ...
      };
    },
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        // this.getselectSaleSingle(this.query);
        // this.getselectChannelSaleTracking(this.query);
        // this.getchannelSaleCompletionStatistics(this.query);
        this.getshopSaleCompletionStatistics(this.query);
        this.getselectShopSaleTracking(this.query);
      },
      deep: true,
      immediate: true,
    },
    channelName: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        // this.getselectSaleSingle(this.query);
        // this.getselectChannelSaleTracking(this.query);
        // this.getchannelSaleCompletionStatistics(this.query);
        this.getshopSaleCompletionStatistics(this.query);
        this.getselectShopSaleTracking(this.query);
      },
      deep: true,
      immediate: true,
    },
    // salesGrade: {
    //   handler: function (newnew, oldold) {
    //     console.log(JSON.stringify(newnew));
    //     this.getselectChannelSaleTracking();
    //     this.getselectSaleSingle();
    //     this.getselectShopSaleTracking();
    //     return;
    //     // this.list = [];
    //     // this.formData = {
    //     //   libraryIdList: [{ id: "" }],
    //     // };
    //     //  this.chinaConfigure();
    //     // this.chinaConfigure();
    //     // this.$nextTick(() => {
    //     //   this.$refs.platform.echarts.resize();
    //     // });
    //     // this.getDateArr(this.timeGap);
    //     if (!this.timeGap.endTime) {
    //       return;
    //     }
    //     let obj = {};
    //     if (this.shopActive) {
    //       obj = {
    //         dateType: "month",
    //         salesGrade: this.salesGrade.join(","),
    //       };
    //     } else {
    //       obj = {
    //         dateType: "date",
    //         ...this.timeGap,
    //         salesGrade: this.salesGrade.join(","),
    //       };
    //     }
    //     this.getselectSaleTargetStatistics(obj);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    // ChannelActive: {
    //   handler: function (newnew, oldold) {
    //     console.log(JSON.stringify(newnew));

    //     if (!this.timeGapChannel.endTime) {
    //       return;
    //     }

    //
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    // shopActive: {
    //   handler: function (newnew, oldold) {
    //     console.log(JSON.stringify(newnew));

    //     if (!this.timeGap.endTime) {
    //       return;
    //     }

    //     this.getshopSaleCompletionStatistics();
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  mounted() {
    window.addEventListener("scroll", this.startScrollTimer);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.startScrollTimer);
  },

  methods: {
    //china地区排行前20
    chinaConfigure() {},

    //添加库存名称
    addLibraryIdList() {},
    //库存名称删除
    delRow(item, index) {},

    keywordListlength(type) {},
    //品类
    goodstableEdit(row, column, cell, event) {},
    //价格带
    pricetableEdit(row, column, cell, event) {},
    //多对一指标点击回传
    handleSetItemChartData(type) {},

    //客件数
    getnumberOfItem(param) {},

    shopInventorytableEdit(row, column, cell, event) {},
    //店铺库存Top
    shopInventoryTop(obj) {},
    //渠道库存比例图
    channelInventorytableEdit(row, column, cell, event) {},
    //渠道库存Top
    channelInventoryTop(obj) {},
    //渠道SaleTop
    getchannelSaleTop(obj) {},

    //店铺SaleTop
    getshopSaleTop(obj) {},

    //库存指标
    getselectSkuSingle(obj) {},

    //库存曲线
    getechartSkuData(obj) {},

    //曲线
    getechartChannelData(obj) {},
    //指标点击回传
    handleSetLineSkuData(type) {},
    //指标点击回传
    handleSetLineChartData(type) {},
    //渠道时间控件
    changDayChannel(val) {
      this.dayActiveChannel = val;
      this.timeGapChannel.startTime = val[0];
      this.timeGapChannel.endTime = val[1];
    },
    getDateArrChannel(value) {
      this.timeGapChannel.startTime = value[0];
      this.timeGapChannel.endTime = value[1];
      // console.log(JSON.stringify(this.timeGap));
      // console.log(JSON.stringify(this.dayActive));
      if (this.dayActiveChannel == "365") {
        this.ChannelActive = true;
      } else {
        this.ChannelActive = false;
      }

      this.dayActiveChannel = 1;
    },
    //店铺时间控件
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.timeGap));
      console.log(JSON.stringify(this.dayActive));
      let obj = {};
      if (this.dayActive == "365") {
        this.shopActive = true;
      } else {
        this.shopActive = false;
      }
      this.getshopSaleCompletionStatistics();
      this.dayActive = 1;
    },
    getchannelSaleCompletionStatistics(query) {
      let obj = {
        ...query,
        label: "channel",
      };
      // if (this.ChannelActive) {
      //   obj = {
      //     dateType: "month",
      //     label: "channel",
      //     salesGrade: this.salesGrade.join(","),
      //   };
      // } else {
      //   obj = {
      //     dateType: "date",
      //     ...this.timeGapChannel,
      //     label: "channel",
      //     salesGrade: this.salesGrade.join(","),
      //   };
      // }
      channelSaleCompletionStatistics(obj).then((response) => {
        let order = { date: [], data: [] };
        order.date = response.map((item) => item.dataDateUnit);
        response.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;
        const keyArray = Object.keys(order.data[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "10%",
          },
          // 提示框
          // tooltip: { trigger: "axis" },
          tooltip: {
            trigger: "axis",
            valueFormatter: function (value) {
              return value + " %";
            },
          },
          xAxis: {
            data: xData,
          },
          yAxis: [
            {
              // name: "Temperature",
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4",
                },
              },
              axisLabel: {
                formatter: "{value} %",
              },
            },
          ],
          legend: {
            data: keyArray,
          },
          series,
        };

        //   myChart.setOption(option);
        var myChartDom = this.$refs.echarts;

        // 检查是否已经存在ECharts实例
        if (echarts.getInstanceByDom(myChartDom)) {
          // 如果存在，销毁它
          echarts.getInstanceByDom(myChartDom).dispose();
        }

        // 初始化新的ECharts实例
        var myChart = echarts.init(myChartDom);

        // Raddar.setOption(option);
        myChart.setOption(option);
      });
    },
    getshopSaleCompletionStatistics(query) {
      let obj = {
        // ...query,
        salesGrade: this.query.salesGrade,
        dateType: this.query.dateType,
        channel: this.channelName,
        label: "shop",
      };
      // if (this.shopActive) {
      //   obj = {
      //     dateType: "month",
      //     label: "shop",
      //     channel: this.channelName,
      //     salesGrade: this.salesGrade.join(","),
      //   };
      // } else {
      //   obj = {
      //     dateType: "date",
      //     ...this.timeGap,
      //     label: "shop",
      //     channel: this.channelName,
      //     salesGrade: this.salesGrade.join(","),
      //   };
      // }
      shopSaleCompletionStatistics(obj).then((response) => {
        // this.shopbarData = response;
        if (response.length == 0) {
          var myChartDom = this.$refs.echartDataShop;

          // 检查是否已经存在ECharts实例
          if (echarts.getInstanceByDom(myChartDom)) {
            // 如果存在，销毁它
            echarts.getInstanceByDom(myChartDom).dispose();
          }
          return;
        }
        let order = { date: [], data: [] };
        order.date = response.map((item) => item.dataDateUnit);

        response.forEach((item) => {
          order.data.push(item.keywordProperty);
        });

        const xData = order.date;

        const keyArray = Object.keys(order.data[0]);

        console.log(JSON.stringify(keyArray));
        const series = [];
        keyArray.forEach((key) => {
          if (key.includes("完成率")) {
            series.push({
              name: key,
              data: order.data.map((item) => item[key]),
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              // itemStyle: {
              //   normal: {
              //     color: "#F02FC2",
              //   },
              // },
              tooltip: {
                valueFormatter: function (value) {
                  return value + " %";
                },
              },
            });
          } else {
            series.push({
              name: key,
              data: order.data.map((item) => item[key]),
              type: "bar",
              barWidth: 20,
              tooltip: {
                valueFormatter: function (value) {
                  return value + " 万";
                },
              },
            });
          }
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "5%",
            bottom: "10%",
          },
          // 提示框
          // tooltip: { trigger: "axis" },
          tooltip: {
            trigger: "axis",
            // valueFormatter: function (value) {
            //   return value + " %";
            // },
          },
          xAxis: {
            data: xData,
          },
          yAxis: [
            {
              splitLine: { show: false },
              // axisLine: {
              //   lineStyle: {
              //     color: "#B4B4B4",
              //   },
              // },

              axisLabel: {
                formatter: "{value} ",
              },
            },
            {
              // name: "Temperature",
              splitLine: { show: false },
              // axisLine: {
              //   lineStyle: {
              //     color: "#B4B4B4",
              //   },
              // },
              axisLabel: {
                formatter: "{value} %",
              },
            },
          ],
          legend: {
            // data: keyArray,
          },
          series,
        };

        //   myChart.setOption(option);
        var myChartDom = this.$refs.echartDataShop;

        // 检查是否已经存在ECharts实例
        if (echarts.getInstanceByDom(myChartDom)) {
          // 如果存在，销毁它
          echarts.getInstanceByDom(myChartDom).dispose();
        }

        // 初始化新的ECharts实例
        var myChart = echarts.init(myChartDom);
        // if (response.length == 0) {
        //   return;
        // } else {
        myChart.setOption(option);
        // }

        // Raddar.setOption(option);
      });
    },
    getselectChannelSaleTracking(query) {
      let obj = {
        salesGrade: query.salesGrade,
        label: "channel",
      };
      selectChannelSaleTracking(obj).then((response) => {
        this.ChannelSaleTrackingList = response;
      });
    },
    getselectShopSaleTracking(query) {
      let obj = {
        salesGrade: query.salesGrade,
        label: "shop",
        channel: this.channelName,
        // dateType: "year",
      };
      selectShopSaleTracking(obj).then((response) => {
        this.ShopSaleTrackingList = response;
      });
    },
    //销售指标
    getselectSaleSingle(query) {
      let obj = {
        ...query,
        label: "channel",
      };
      channelSaleData(obj).then((response) => {
        this.barChartData = {
          columns: [],
          rows: [],
        };
        this.barChartData.columns.push("渠道", "销售完成率");
        let row = [];
        response.forEach((item) => {
          row.push({
            渠道: item.channel,
            销售额: item.saleAmount ? item.saleAmount : null,
          });
          this.barChartData.rows.push({
            渠道: item.channel,
            销售完成率: item.completionRate,
          });
        });
        // this.echartDataSku.columns = []
        //  this.barChartData.columns.push("渠道", "销售额");
        this.echartDataSku.rows = row;
      });
      //   if (response) {
      //     this.biNumberItem = response ? response : {};
      //     this.echartData.value = response.yearCompletionRate;
      //     this.echartData.name = "年度完成率";

      //     this.echartDataquarterly.value = response.quarterlyCompletionRate;
      //     this.echartDataquarterly.name = "季度完成率";

      //     this.echartDatamonthly.value = response.monthlyCompletionRate;
      //     this.echartDatamonthly.name = "本月完成率";
      //   }
      //   console.log(JSON.stringify(this.biNumberItem));
      // ;
    },
    getselectSaleTargetStatistics(obj) {
      selectSaleTargetStatistics(obj).then((response) => {
        // if (response.length == 0) {
        //   this.echartDataMin = {};
        //   // return;
        // }
        // if (response.length > 0) {
        response.forEach((item, index) => {
          item.id = index;
        });
        this.skcitemData = response;
        this.echartDataMin.xData = response.map((item) =>
          item.dataDate ? item.dataDate : item.dataMonth
        );
        //销售目标
        this.echartDataMin.female = response.map((item) =>
          item.saleTarget ? item.saleTarget : null
        );
        //销售额
        this.echartDataMin.male = response.map((item) => item.saleAmount);
        //达成率
        this.echartDataMin.average = response.map(
          (item) => item.completionRate
        );
        // }
        return;
      });
    },
    //skc图表点击
    SetLineChartData(index) {
      console.log(index);
      this.skcitemData.forEach((item) => {
        if (index == item.id) {
          // let obj = {
          //   dataYear: item.dataYear,
          //   dataMonth: item.dataMonth,
          //   company: this.salesGrade[0],
          // };
          this.queryParams.dataYear = item.dataYear;
          this.queryParams.dataMonth = item.dataMonth;
          // this.queryParams.company = this.salesGrade[0];
          this.getskuBySkcSaleList();
        }
      });
    },
    //饼图点击
    SetPieChartData(index) {
      this.PieData.forEach((item) => {
        if (index == item.id) {
          // let obj = {
          //   dataYear: item.dataYear,
          //   dataMonth: item.dataMonth,
          //   company: this.salesGrade[0],
          // };
          // this.queryParams.dataYear = item.dataYear;
          // this.queryParams.dataMonth = item.dataMonth;
          // this.queryParams.company = this.salesGrade[0];
          this.queryParams.brand = item.brand;
          this.getchannelSaleAmountYoy();
        }
      });
    },
    //环比
    getchannelSaleAmountYoy() {
      channelSaleAmountYoy(this.queryParams).then((response) => {
        // this.barChartData.columns = ["gpuType", "val1", "val2"];
        this.barChartData = {
          columns: [],
          rows: [],
        };
        this.barChartData.columns.push("渠道", "销售增长率");
        response.forEach((item) => {
          this.barChartData.rows.push({
            渠道: item.channel,
            销售增长率: item.saleAmountYoy,
          });
        });
      });
    },
    //饼图
    getskuBySkcSaleList() {
      brandSaleAmount(this.queryParams).then((response) => {
        console.log(JSON.stringify(response));
        if (response.length < 1) {
          return;
        }
        response.forEach((item, index) => {
          item.id = index;
        });
        // this.skcitemData = response;
        this.PieData = response;
        if (response) {
          let row = [];
          response.forEach((item) => {
            row.push({
              value: item.saleAmount,
              name: item.brand,
            });
          });
          // this.PieChartData.female
          this.PieChartData.xData = response.map((item) => item.brand);
          this.PieChartData.female = row;
        }
      });
    },

    changeDate(label) {
      console.log(label);
    },
    //店铺控件
    handleChange(val) {
      return;
      // console.log(JSON.stringify(val));
      // // let obj = { salesGrade: this.this.salesGrade.join(","), ...this.timeObj };
      // let obj = { salesGrade: this.this.salesGrade.join(",") };
      // console.log(JSON.stringify(obj));

      // localStorage.removeItem("result");
      // // localStorage.setItem("result", JSON.stringify(obj));

      // if (!obj.endTime) {
      //   return;
      // } else {
      //   //销售指标

      //   //渠道库存Top
      //   this.channelInventoryTop(obj);
      //   //店铺库存Top
      //   this.shopInventoryTop(obj);
      //   //曲线
      //   this.getechartChannelData(obj);

      //   //渠道SaleTop
      //   this.getchannelSaleTop(obj);
      //   //店铺SaleTop
      //   this.getshopSaleTop(obj);
      //   //商品排行Top
      //   this.changeView();
      // }
      // let param = {
      //   dataSource: this.salesGrade,
      //   startTime: this.dateFormat(this.timeObj.startTime),
      //   endTime: this.dateFormat(this.timeObj.endTime),
      //   dataType: this.groupType,
      // };
      // console.log(JSON.stringify(param));
      // if (!param.endTime) {
      //   return;
      // } else {
      //   // this.getechartChannelData(obj)
      //   this.getnumberOfItem(param);
      //   this.getTopSal(param);
      // }
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      // this.timeObj = timeObj;
      // if (this.salesGrade.length <= 0) {
      //   return;
      // }
      return;
      let param = {
        dataSource: this.salesGrade,
        startTime: this.dateFormat(timeObj.startTime),
        endTime: this.dateFormat(timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        //客件数
        this.getnumberOfItem(param);
        //地区Top20
        this.getTopSal(param);
      }
      console.log(JSON.stringify(this.timeObj));

      let obj = { salesGrade: this.this.salesGrade.join(",") };

      console.log(JSON.stringify(obj));

      localStorage.removeItem("result");
      localStorage.setItem("result", JSON.stringify(obj));

      if (!obj.endTime) {
        return;
      } else {
        //销售指标
        this.getselectSaleSingle(this.salesGrade);
        //渠道库存Top
        this.channelInventoryTop(obj);
        //店铺库存Top
        this.shopInventoryTop(obj);
        //曲线
        this.getechartChannelData(obj);

        //渠道SaleTop
        this.getchannelSaleTop(obj);
        //店铺SaleTop
        this.getshopSaleTop(obj);
        //商品排行Top
        this.changeView();
      }
    },
    //分页
    //售罄时间定义
    changePage() {},
    //视图角度
    changeView(val) {},

    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        this.channelNameData = Array.from(
          new Set(response.map((item) => item.channel))
        );
        console.log(JSON.stringify(this.channelNameData));
        return;
        let result = this.transformData(response);
        this.salesGrade = [result[0].label];
        this.cascadeList = result;
        //销售指标
        this.getselectSaleSingle(this.salesGrade);
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.companyName;
        let channel = item.brand;
        // let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            // children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        // let shopIndex = result[brandIndex].children[
        //   channelIndex
        // ].children.findIndex((shopObj) => shopObj.label === shopName);
        // if (shopIndex === -1) {
        //   result[brandIndex].children[channelIndex].children.push({
        //     label: shopName,
        //     value: shopName,
        //     // children: []
        //   });
        // }
      });

      return result;
    },
    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },
    /** 查缓存询信息 */
    getList() {},
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载分析销售监控数据，请稍候！");
    },
    //地区Top20
    getTopSal(param) {},
    /** 导出按钮操作 */
    handleExport() {
      let obj = {
        salesGrade: this.query.salesGrade,
        label: "channel",
      };
      this.download(
        "ssale/BiSaleAmount/selectChannelSaleTrackingExport",
        {
          ...obj,
        },
        `渠道"${new Date().getTime()}.xlsx`
      );
    },
    handleExportshop() {
      let obj = {
        salesGrade: this.query.salesGrade,
        label: "shop",
        channel: this.channelName,
      };
      this.download(
        "ssale/BiSaleAmount/selectShopSaleTrackingExport",
        {
          ...obj,
        },
        `店铺"${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  // padding: 32px;
  // background-color: rgb(240, 242, 245);
  // position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    // padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
// .train-tree-cascader {
//   height: 500px !important;
// }

// .el-scrollbar__wrap {
//   overflow: initial !important;
// }
</style>
private Double monthlyCompletionRate;//本月完成率
private Double:yesterdaySales;//昨日销售额
private Double yesterdaySalesYoy;// 昨日销售额同比
private Double:yesterdaySalesChain;//昨日销售额环比
:weeklySales;//本周销售额private Double
private Double weeklySalesYoy;//本周销售额同比
private Double weeklySalesChain;//本周销售额环比
private Double monthlySales;//本月销售额
private Double monthlySalesYoy;// 本月销售额同比
private Double monthlySaleschain;//本月销售额环比
private Double:monthlySalesTarget;//月销售目标
private Double monthlyReturnAmount;//月退货金额
private Double monthlyReturnAmountYoy;// 月退货金额同比
private Double monthlyReturnAmountChain;//月退货金额环比
private Double monthlyNetSaleAmount;//月净销售额
private Double monthlyNetSaleAmountYoy;//月净销售额同比private Double monthlyNetSaleAmountchain;//月净销售额环比
private Integer monthlyOrderCount;//月订单数
private Double monthlyOrderCountYoy;// 月订单数同比
private Double monthlyOrderCountChain;// 月订单数环比
private Double monthlyCustomerPrice;//月客单价
private Double monthlyCustomerPriceYoy;// 月客单价同比private Double monthlycustomerPricechain;//月客单价环比
private Double quarterlycompletionRate;//李度完成率
private Double salesTargetQuarterly;//李销售目标
private Double:quarterlySales;//季度销售额
private Double quarterlySalesYoy;//李度销售额同比
private Double quarterlySaleschain;//李度销售额环比
private Double:quarterlyReturnAmount;//季度退货金额
private Double quarterlyReturnAmountYoy;//季度退货金额同比private Double quarterlyReturnAmountchain;// 李度退货金额环比
private Double quarterlyNetSaleAmount;//李度净销售额
private Double quarterlyNetSaleAmountYoy;// 李度净销售额同比private Double quarterlyNetSaleAmountchain;// 李度净销售额环比


private Double quarterlyNetSaleAmountchain;李度净销售额环
private Integer quarterlyOrderCount;// 李度订单数
private Double quarterlyOrderCountYoy;// 李度订单数同比
private Double quarterlyOrderCountChain;//李度订单数环比
private Double quarterlyCustomerPrice;// 李度客单价
private Double quarterlycustomerPriceYoy;// 李度客单价同比
private Double quarterlyCustomerPricechain;// 李度客单价环比
private Double yearCompletionRate;//年度完成率
private Double yearsales;// 年度销售额
private Double yearSalesChain;//年度销售额
private Double yearSalesYoy;// 年度销售额
private Double salesTargetYear;// 年销售目标
private Double yearReturnAmount;// 年度退货金额
private Double yearReturnAmountYoy;//年度退货金额同比
private Double yearReturnAmountChain;//年度退货金额环比
private Double yearNetSaleAmount;// 年度净销售额
private Double yearNetSaleAmountYoy;// 年度净销售额同比private Double yearNetSaleAmountChain;// 年度净销售额环比
private Integer yearOrderCount;// 年度订单数
private Double yearOrderCountYoy;//年度订单数同比
private Double year0rderCountchain;//年度订单数环比
private Doublee yearCustomerPrice;//年度客单价
private Double yearCustomerPriceYoy;// 年度客单价同比
private Double yearCustomerPricechain;//年度客单价环比


/** 店铺id */
dExcel(name =“店铺id")
private string shopId;
/** 店铺名称 */
0Excel(name =“店铺名称")
private string shopName;
/** 销售额 */
0Excel(name =“销售额")
private Double saleAmount;
private Double saleAmountChain;//环比private Double saleAmountYoy;//同比
扩展字段不用放
/** 退款金额 */
@Excel(name =“退款金额")
private Double returnAmount;
/** 净销售额 */
0Excel(name ="净销售额")
private Double netSalesAmount;
/*疜婀憎弗昃箧瞎摶⓪愧粕呷黯湘乾喏藔齔盉綺谆仍单数 */
@Excel(name =“下单数")
private Integer ordersNumber;
/** 下单数 */
@Excel(name =“下单数")
private Double customerUnitPrice;
/** 日期 */
dJsonFormat(pattern ="yyyy-MM-dd")
@Excel(name ="期",width=30,dateFormat ="yyyy-MM-dd")private Date dataDate;


private string channel;// 渠道
private Double yesterdaySales;昨日销售额private Double yesterdaySalesYoy;// 昨日销售额同比
private Double weeklySales;//本周销售额
private Double weeklySalesCost;// 本周成本private Double weeklySalesYoy;// 本周销售额同比
private Double monthlySales;// 本月销售额private Double monthlySalesCost;//本月销成本private Double monthlySalesYoy;// 本月销售额同比private Double monthlySalesChain;// 本月销售额环比private Double monthlySalesTarget;// 月销售目标
private Double salesTargetQuarterly;// 李销售目标private Double quarterlySales;// 季度销售额private Double quarterlySalescost;/李度成本private Double quarterlySalesYoy;// 季度销售额同比private Double quarterlySalesChain;// 李度销售额环比
private Double yearSales;// 年度销售额
private Double yearsalesCost;// 年度成本
private Double yearSalesChain;//年度销售额环比private Double yearSalesYoy;// 年度销售额同比
private Double salesTargetYear;// 年销售目标